import React, { useEffect, useState } from 'react'
import { Button, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import http from '../../utils/http'


// 类型
interface DataType {
  createdAt: string;
  updatedAt: string;
  id: number;
  title: string;
  content: string[];
}

interface paramsPage {
  page:number;
  pageSize:number;
}

const Home = () => {
// 模拟数据
const columns: TableProps<DataType>['columns'] = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '内容',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button>编辑</Button>
        <Button>删除</Button>
      </Space>
    ),
  },
];

  const [artiList,setArtiList]=useState<DataType[]>([])
  const [total,setTotal]=useState(0)
  const [queryPage,setQueryPage]=useState<paramsPage>({
    page:1,
    pageSize:10
  })


  // 请求列表接口
  const getData=async(queryPage:paramsPage)=>{
   const res=await http.get("http://172.27.2.110/article/list",{params:queryPage})
   const {count,rows}=res.data
   setTotal(count)
   setArtiList(rows)
  }

  useEffect(()=>{
   getData(queryPage)
  },[])


  // 分页
  const hanpage=async(page:number,pageSize:number)=>{
    setQueryPage({
        ...queryPage,
        page:page,
        pageSize:pageSize
    })
    getData(queryPage)
  }

  return (
    <div>
      <Table<DataType> 
      columns={columns}
      dataSource={artiList}
      pagination={{
       total:total,
       showSizeChanger:true,
       showQuickJumper:true,
       showTotal:(total) => `Total ${total} items`,
       onChange:hanpage
      }}
      />
    </div>
  )
}

export default Home
